<template>
  <div class="game-window word-window">
    <!-- Word标题栏 -->
    <div class="window-header">
      <div class="window-controls">
        <img src="@/assets/icons/word.svg" class="app-icon" />
        <span class="title">Document1.docx - Word</span>
      </div>
      <div class="window-buttons">
        <span class="minimize">─</span>
        <span class="maximize">□</span>
        <span class="close" @click="$router.push('/')">×</span>
      </div>
    </div>

    <!-- Word功能区 -->
    <div class="word-ribbon">
      <div class="quick-access-toolbar">
        <button class="save-button"><i class="fas fa-save"></i></button>
        <button class="undo-button"><i class="fas fa-undo"></i></button>
      </div>
      
      <div class="ribbon-tabs">
        <div class="tab active">文件</div>
        <div class="tab">开始</div>
        <div class="tab">插入</div>
        <div class="tab">页面布局</div>
        <div class="tab">引用</div>
        <div class="tab">邮件</div>
        <div class="tab">审阅</div>
        <div class="tab">视图</div>
      </div>

      <div class="ribbon-content">
        <div class="ribbon-group">
          <div class="group-title">剪贴板</div>
          <div class="group-content">
            <button class="ribbon-button">
              <i class="fas fa-paste"></i>
              <span>粘贴</span>
            </button>
            <div class="small-buttons">
              <button><i class="fas fa-cut"></i> 剪切</button>
              <button><i class="fas fa-copy"></i> 复制</button>
            </div>
          </div>
        </div>

        <div class="ribbon-group">
          <div class="group-title">字体</div>
          <div class="group-content">
            <select class="font-family">
              <option>微软雅黑</option>
            </select>
            <select class="font-size">
              <option>11</option>
            </select>
            <div class="font-buttons">
              <button><i class="fas fa-bold"></i></button>
              <button><i class="fas fa-italic"></i></button>
              <button><i class="fas fa-underline"></i></button>
            </div>
          </div>
        </div>

        <div class="ribbon-group">
          <div class="group-title">段落</div>
          <div class="group-content">
            <div class="align-buttons">
              <button><i class="fas fa-align-left"></i></button>
              <button><i class="fas fa-align-center"></i></button>
              <button><i class="fas fa-align-right"></i></button>
              <button><i class="fas fa-align-justify"></i></button>
            </div>
          </div>
        </div>

        <div class="ribbon-group">
          <div class="group-title">打印</div>
          <div class="group-content">
            <button class="ribbon-button" @click="toggleDisguise">
              <i class="fas fa-print"></i>
              <span>打印</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 文档标尺 -->
    <div class="word-ruler">
      <div class="ruler-horizontal"></div>
      <div class="ruler-vertical"></div>
    </div>

    <!-- 游戏区域 -->
    <div class="game-content" :class="{ 'disguise': isDisguised }">
      <!-- 伪装模式 -->
      <div v-if="isDisguised" class="disguise-content">
        <div class="print-dialog">
          <h3>打印</h3>
          <div class="print-settings">
            <div class="printer-select">
              <label>打印机：</label>
              <select>
                <option>Microsoft Print to PDF</option>
              </select>
            </div>
            <div class="print-options">
              <label>份数：</label>
              <input type="number" value="1" min="1" max="99">
            </div>
          </div>
          <div class="progress-bar"></div>
          <p>正在打印 Document1.docx</p>
        </div>
      </div>
      
      <!-- 游戏画布 -->
      <canvas 
        v-else
        ref="gameCanvas"
        :width="canvasWidth"
        :height="canvasHeight"
        @keydown="handleKeyDown"
        tabindex="0"
      ></canvas>
    </div>

    <!-- 状态栏 -->
    <div class="word-statusbar">
      <div class="status-item">页面 1/1</div>
      <div class="status-item">字数 0</div>
      <div class="status-item">中文(中国)</div>
      <div class="zoom-control">
        <span>100%</span>
        <input type="range" min="10" max="200" value="100">
      </div>
    </div>

    <!-- 广告区域 -->
    <div class="ad-container">
      <div id="snake-ad"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { SnakeGame } from './game'

const router = useRouter()
const gameCanvas = ref(null)
const game = ref(null)
const isDisguised = ref(false)
const score = ref(0)

// 游戏配置
const canvasWidth = 600
const canvasHeight = 400
const gridSize = 20

// 初始化游戏
onMounted(() => {
  if (gameCanvas.value) {
    game.value = new SnakeGame(gameCanvas.value)
    game.value.start()
    
    // 监听键盘事件
    window.addEventListener('keydown', handleKeyDown)
  }
})

onUnmounted(() => {
  if (game.value) {
    game.value.pause()
  }
  window.removeEventListener('keydown', handleKeyDown)
})

// 处理键盘事件
const handleKeyDown = (event) => {
  if (isDisguised.value) return
  
  const keyMap = {
    'ArrowUp': 'up',
    'ArrowDown': 'down',
    'ArrowLeft': 'left',
    'ArrowRight': 'right',
    'Escape': 'escape'
  }

  const direction = keyMap[event.key]
  if (direction === 'escape') {
    toggleDisguise()
  } else if (direction && game.value) {
    game.value.changeDirection(direction)
  }
}

// 切换伪装模式
const toggleDisguise = () => {
  isDisguised.value = !isDisguised.value
  if (game.value) {
    if (isDisguised.value) {
      game.value.pause()
    } else {
      game.value.start()
    }
  }
}

// 重置游戏
const resetGame = () => {
  if (game.value) {
    game.value.reset()
    game.value.start()
  }
}
</script>

<style lang="scss" scoped>
.word-window {
  .window-header {
    background: #2b579a;
    color: white;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    
    .window-controls {
      display: flex;
      align-items: center;
      
      .app-icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
    
    .window-buttons {
      margin-left: auto;
      display: flex;
      
      span {
        padding: 0 10px;
        cursor: pointer;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  .word-ribbon {
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;

    .quick-access-toolbar {
      height: 20px;
      padding: 2px 10px;
      background: #f3f3f3;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      gap: 4px;

      button {
        padding: 2px 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        
        &:hover {
          background: #e5e5e5;
        }
      }
    }

    .ribbon-tabs {
      display: flex;
      background: #f3f3f3;
      padding: 0 10px;

      .tab {
        padding: 4px 12px;
        cursor: pointer;
        border: 1px solid transparent;
        
        &:hover {
          background: #e5e5e5;
        }
        
        &.active {
          background: white;
          border: 1px solid #ddd;
          border-bottom: none;
        }
      }
    }

    .ribbon-content {
      background: white;
      padding: 4px;
      display: flex;
      gap: 2px;

      .ribbon-group {
        padding: 2px 4px;
        border-right: 1px solid #ddd;
        
        .group-title {
          font-size: 11px;
          color: #666;
          text-align: center;
        }
        
        .group-content {
          display: flex;
          flex-direction: column;
          gap: 2px;
          
          select {
            width: 120px;
            height: 22px;
          }
          
          .font-buttons, .align-buttons {
            display: flex;
            gap: 1px;
            
            button {
              padding: 4px 8px;
              background: transparent;
              border: 1px solid transparent;
              cursor: pointer;
              
              &:hover {
                background: #e5e5e5;
                border: 1px solid #ccc;
              }
            }
          }
        }
      }
    }
  }

  .word-ruler {
    height: 20px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
    position: relative;

    .ruler-horizontal {
      height: 15px;
      margin-left: 20px;
      background: linear-gradient(to right, #ccc 1px, transparent 1px) repeat-x;
      background-size: 10px 100%;
    }

    .ruler-vertical {
      width: 15px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(to bottom, #ccc 1px, transparent 1px) repeat-y;
      background-size: 100% 10px;
    }
  }

  .word-statusbar {
    height: 22px;
    background: #f3f3f3;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: #666;

    .status-item {
      margin-right: 20px;
    }

    .zoom-control {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;

      input[type="range"] {
        width: 100px;
      }
    }
  }
}

.game-content {
  display: flex;
  justify-content: center;
  padding: 20px;
  
  canvas {
    border: 1px solid #ddd;
    outline: none;
  }
  
  &.disguise {
    .disguise-content {
      text-align: center;
      padding: 40px;
      
      .progress-bar {
        width: 300px;
        height: 20px;
        background: #f0f0f0;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
        
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 30%;
          background: #2b579a;
          animation: progress 2s infinite linear;
        }
      }
    }
  }
}

.ad-container {
  position: absolute;
  right: 20px;
  top: 80px;
  width: 300px;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
}

@keyframes progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
</style> 